// 老板信息完善的路由容器组件
import React from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import HeaderSelector from '../../components/header-selector/header-selector'
import { Button, NavBar, InputItem, TextareaItem, Toast } from 'antd-mobile'
import { updateUser } from '../../redux/action'
class LaoBanInfo extends React.Component {
  state = {
    header: '', //头像名称
    post: '', //职位
    info: '', //个人或职位简介
    company: '', //公司名称
    salary: '' //工资
  }

  setHeader = header => this.setState({ header })

  handleChange = (name, val) => {
    this.setState({
      [name]: val
    })
  }

  save = () => {
    const { header, post, info, company, salary } = this.state
    if(!header){
      return Toast.info('请选择头像')
    }
    if(!post){
      return Toast.info('请填写招聘职位')
    }
    if(!company){
      return Toast.info('请填写公司名称')
    }
    if(!salary){
      return Toast.info('请填写职位薪资')
    }
    if(!info){
      return Toast.info('请填写职位描述')
    }
    // console.log(this.state)
    this.props.updateUser(this.state)
  }
  render() {
    const { header, type } = this.props.user
    if (header) {
      //说明信息已经完善
      const path = '/' + type
      return <Redirect to={path} />
    }
    return (
      <div>
        <NavBar>老板信息完善</NavBar>
        <HeaderSelector setHeader={this.setHeader} />
        <InputItem
          onChange={val => this.handleChange('post', val)}
          placeholder="请输入招聘职位"
        >
          招聘职位:
        </InputItem>
        <InputItem
          onChange={val => this.handleChange('company', val)}
          placeholder="请输入公司名称"
        >
          公司名称:
        </InputItem>
        <InputItem
          onChange={val => this.handleChange('salary', val)}
          placeholder="请输入职位薪资"
        >
          职位薪资:
        </InputItem>
        <TextareaItem
          onChange={val => this.handleChange('info', val)}
          title="职位要求:"
          rows={3}
          placeholder="请输入职位要求"
        />
        <Button type="primary" onClick={() => this.save()}>
          保&nbsp;&nbsp;&nbsp;存
        </Button>
      </div>
    )
  }
}

export default connect(state => ({ user: state.user }), { updateUser })(
  LaoBanInfo
)
